<template>
    <view class="bgWrap" style="background:url('https://ctrlsoft.net.cn/app_static/hesaid/img/oneiromancy/background.png') no-repeat;">
        <no-more v-if="noData"></no-more>
        <view v-if="!noData">
        <view :style="{ height: `${statusBarHeight}px` }"></view>
			    <!-- 自定义导航栏高度 并 居中 -->
			<view :style="{
			  height: `${barHeight}px`,
			  'line-height': `${barHeight}px`,
			  'text-align': 'center',
			}">
				<text>测字</text>
			</view>
			<view class="searchImgWrap">
				<view class="searchLeft" style="background:url('https://ctrlsoft.net.cn/app_static/hesaid/img/name/onlineWord.png') no-repeat;background-size: 100% 100%;"></view>
				<view class="searchRight" style="background:url('https://ctrlsoft.net.cn/app_static/hesaid/img/name/write.png') no-repeat;background-size: 100% 100%;"></view>
			</view>
            <view class="contentWrap">
                <view class="warn">注：本测字结果仅供参考，具体结论请以实际情况为主</view>
                <view class="nameWrap">
                    <view class="nameInfo"  v-for="(item, index) in nameArr" :key="index">
                        <view class="pinyin" style="margin-bottom: 10rpx;">{{item.pinyin}}</view>
                        <view class="name">{{item.word}}</view>
                        <!-- <view class="pinyin" style="margin-top: 20rpx;">「{{item.type}}」</view> -->
                    </view>
                </view>
            </view>
			<view class="contentWrap" style="margin-top: 30rpx;margin-bottom: 30rpx;">
                <view class="titleSyl">
                    <view class="circle"></view>
                    <view class="text">汉字意形</view>
                </view>
			   <table>
                    <view v-for="(item,index) in worldInfo" :key="index" >
                        <tr > 
                            <thead class="nameSyl">{{item.col1}}</thead>
                            <td class="nameSyl" v-for="(childItem, index) in item.nameList" :key="index">{{childItem}}</td>
                        </tr>
                    </view>

			   </table>
               <view class="explainWrap" v-for="(item,idx) in nameArr" :key="idx" style="margin-bottom: 100rpx;">
                    <view class="explain">
                        【{{item.word}}】
                    </view>
                    <view class="explainDetail">
                        <rich-text :nodes="item.explanation"></rich-text>
                    </view>
               </view>
			</view>
            <view class="btn" @tap="question">咨询专家</view>
        </view>
    </view>
</template>

<script>
import { glyphomancyAPI, addGlyphomancyPI } from '../../../utils/api.js'
import noMore from '../../../components/no-data/no-more.vue'
    export default {
        components:{noMore},
        data(){
            return {
                name:"",
                sexVls:'',
                noData: false,
                statusBarHeight:'',
		        barHeight:'',
                show:true,
                worldInfo:[],
                nameArr:[
                    // {
                    //     pinyin:'zhang',
                    //     name:'张',
                    //     type:'水'
                    // }
                ]
            }
        },
        onLoad(option){
            console.log('options============>',option)
            this.name = option.name
            this.sexVls = option.sexVls
            this.show = option.show == undefined ? true : false
            this.initData(option.name,option.sexVls)
        },
        mounted() {
            // 状态栏高度
            this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
            // 胶囊数据
            const { top, height } = wx.getMenuButtonBoundingClientRect();
            // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
            this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
        },
        methods:{
            async initData(name,sex) {
                const res = await glyphomancyAPI(name,sex);
                console.log('res1111111111===========>',res)
                if(res == "您输入的姓名包含违法犯罪内容，请重新编辑后重试!"){
                    console.log("哈哈哈哈")
                    setTimeout(() => {
                        uni.navigateBack();  
                    }, 2000);
                }else{
                    if(JSON.stringify(res.result) == "{}"){
                        this.noData = true;
                        return
                    }
                    const obj = {
                        "0":'姓名',
                        "1":'拼音',
                        "2":'笔画',
                        "3":'部首'
                    }
                    const arr = res?.result?.nameList?.map((item,index) => {
                        return{
                            'col1':obj[index],
                            nameList: item
                        }
                    })
                    if(this.show){
                        const params = {
                            name:this.name,
                            sex:this.sexVls,
                            context:{
                                GlyphomancyResult:res?.result?.GlyphomancyResult,
                                listAnalysis:res?.result?.listAnalysis
                            }
                        }
                        console.log('params========>',params)
                        await addGlyphomancyPI(params)
                    }
                    
                    this.worldInfo = arr
                    this.nameArr = res?.result?.paraphraseList
                }
                
            },
            question(){
                    uni.reLaunch({
                        url: `../../../pages/tabbar/online/online?id=3`
                    })
            }
        }
    }
</script>

<style lang="scss" scoped>
.btn{
	position: fixed;
	bottom: 30rpx;
    left: 30rpx;
	width: 690rpx;
	background-color: #FF7F22;
	color: #fff;
	border-radius: 8rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
    z-index: 999999;
}
.explainDetail{
    font-size: 26rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 40rpx;
}
.explainWrap{
    margin-top: 30rpx;
    display: flex;
    .explain{
        width: 100rpx;
        min-width: 100rpx;
        color: #FF7F22;
    }
}
.titleSyl{
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    .circle{
        width: 16rpx;
        height: 16rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        opacity: 1;
        border: 4rpx solid #FF7F22;
        border-radius: 50%;
    }
    .text{
        font-weight:600;
        position: relative;
        z-index: 9999;
    }
    .text::before{
        content:'';
        display: inline-block;
        position: absolute;
        bottom:0;
        left: 4rpx;
        z-index:1;
        width: 144rpx;
        height: 20rpx;
        background: linear-gradient(94deg, rgba(255,127,34,0.5) 0%, rgba(255,127,34,0) 100%);
    }
}
.nameSyl{
    line-height: 80rpx;
    width: 172rpx;
    text-align: center;
}

tr{
    display: flex;
}
thead{
    background: #FFF3EA;
    border: 2rpx solid #F0F0F0;
    color: #FF7F22;
}
td{
    border: 2rpx solid #F0F0F0;
}
.nameWrap{
    display: flex;
    margin-top: 60rpx;
	.pinyin{
		text-align: center;
		color: #BFBFBF;
		font-size: 12px;
	}
	.nameInfo{
		margin-right: 20rpx;
	}
    .name{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100rpx;
        height: 100rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        border: 2rpx solid #F0F0F0;
    }
}
.warn{
    font-size: 26rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 30rpx;
}

</style>